<template>
  <div style="height: 100%">
    <Header/>
    <div id="placeholder"></div>
  </div>


</template>

<script setup>
import Header from '@/components/Header'
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {useRouter, useRoute} from "vue-router";

const proxy = getCurrentInstance().appContext.config.globalProperties;
const router = useRouter();  // 跳转url
const route = useRoute();  // 获取url参数
const params = reactive(route.query)
const user = proxy.$cookie.get("userInfo")


const url1 = proxy.$url + "/office/online/" + params.fileType
const url2 = proxy.$url + "/office/save/" + params.fileType


let typeList = [0,"docx", "xlsx", "pdf","pptx"]


var config = {


  // 设置文档信息
  "document": {
    // 文件类型
    /*
    fileType
    定义查看或编辑的源文档的文件类型。一定是小写的。提供以下文件类型：
    .csv、.djvu、.doc、.docm、.docx、.docxf、.dot、.dotm、.dotx、.epub、.fb2、.fodp、.fods、.fodt、. htm、.html、
    .mht、.odp、.ods、.odt、.oform、.otp、.ots、.ott、.oxps、.pdf、.pot、.potm、.potx、.pps、.ppsm、 .ppsx、.ppt、
    .pptm、.pptx、.rtf、.txt、.xls、.xlsb、.xlsm、.xlsx、.xlt、.xltm、.xltx、.xml、.xps。
     */
    "fileType": typeList[params.fileType],
    // 文档唯一标识，最大长度128
    "key": params.id,
    // 文档名称
    "title": params.fileName,
    // 文件地址/获取文件的地址
    "url": url1,
    "info": {},

  },

  // 设置编辑
  "editorConfig": {
    // 设置语言
    "lang": "zh-CN",
    // 两种编辑（edit）和查看（view）
    "mode": "edit",
    // 文件保存时的地址
    "callbackUrl": "http://192.152.128:6831/url-to-callback.ashx",

    // 配置用户信息
    "user": {
      // 用户编号
      "id": params.userId,
      // 用户名称
      "name": user.userName
    },
    width: "100%",
    height: "100%",

  },
};


onMounted(() => {
  var docEditor = new DocsAPI.DocEditor("placeholder", config);
})


</script>


<style scoped>
iframe {
  height: 700px;
  border: 2px #ccd0dc solid;
}
</style>